.appliaction-create-container {
  background: #fff;
  padding: 16px 24px;

  .application-type-select {
    &-content {
      margin-right: -8px;
      margin-left: -8px;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(277px, 349px));

      &-card {
        position: relative;
        margin: 8px;
        height: 112px; //  144px;

        &:hover {
          background-color: #f7f9fa;
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
        }

        &.active {
          border-color: #c0c6cc;
          border-radius: 2px;
          background-color: #eff3f8;
        }

        &.disabled {
          cursor: not-allowed;
        }
      }
    }
  }
}

.icon-right .next-menu .next-menu-icon-selected.next-icon.next-menu-icon-right {
  right: unset;
}

.create-submit-step {
  .next-step-item {
    &-finish,
    &-process,
    &-wait {
      .next-step-item-body {
        margin-left: 4px !important;
        padding-bottom: 10px;
        .next-step-item-title {
          color: var(--color-text1-9, #333);
        }
        .next-step-item-content {
          color: #888;
        }
      }
      .next-step-item-tail {
        margin: 0 auto !important;
        .next-step-item-tail-overlay {
          background-color: #888;
        }
      }
    }
    .next-icon-success {
      color: rgba(0, 158, 100, 1);
    }
    .next-icon-error {
      color: red;
    }
    .next-icon-loading {
      color: #888;
    }
  }
}

.applications-template {
  margin-right: -8px;
  margin-left: -8px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  .applications-card {
    position: relative;
    width: calc((100% - 48px) / 3);
    margin: 8px;
    overflow: initial;
    border: 1px solid #e3e4e6;

    &:hover {
      border: 1px solid #0077cc;
      box-sizing: border-box;
      box-shadow: none;
      transition: all 0.1s;
    }
  }
}
